import {messages} from "share/common";

import React from 'react';
import {connect} from 'react-redux';

import {Modal, Button, Form, Icon, Input, Checkbox, Row, Col, Spin, Layout} from 'antd';

import newUserProtocolsService from 'components/template/new-user-protocol/new-user-protocol.service';
import 'styles/components/template/reset-password/reset-password.scss';
import ResetPassword from "components/template/reset-password/reset-password";
const FormItem = Form.Item;

class NewProtocolModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      disabled: true,
      loading: false,
      userProtocol: {title: '', content: ''},//是否有用户协议
      clickUserProtocol: false,//是否点击用户协议
      weChat: false,//是否为微信登录
      userProtocolVisible: false,//用户协议弹框
      resetPassword: false,//重置密码弹窗
    };
  }

  componentWillMount() {
    this.getUserProtocols();
  }

  getAllProtocols = (id, username)=> {
    this.setState({
      loading: true,
    });
    const {userProtocol} = this.state;
    newUserProtocolsService.getAllProtocols(id, username)
      .then((res) => {
        userProtocol.content = res.data.content;
          this.setState({
            userProtocol,
            loading: false,
          })
      })
      .catch((err) => {
        this.setState({
          loading: false,
        });
      });
};

  getUserProtocols = () => {
    const {userProtocol} = this.state;
    let mobile_or_email = this.props.user.email || this.props.user.mobile;
    this.setState({
      loading: true,
    });
    newUserProtocolsService.getUserProtocols(mobile_or_email)
      .then((res) => {
        this.setState({
          loading: false,
        });
        if(this.props.resetPassword){
          this.setState({
            visible: true,
          });
        }
        if(res.data.tenantProtocolId){
          userProtocol.title = res.data.tenantProtocolTitle;
          this.setState({
            userProtocol,
          });
         this.getAllProtocols(res.data.tenantProtocolId, mobile_or_email);
        }else if(res.data.tenantDataSource){
          this.setState({
            weChat: true,
          })
        }
      })
      .catch((err) => {
        this.setState({
          loading: false,
        });
      });
  };

  handleOK = () => {
    const {weChat} = this.state;
    if(weChat){
      newUserProtocolsService.weChatAgreeProtocol()
        .then((res) => {
        })
        .catch((err) => {
        });
      this.setState({
        visible: false,
      });
    }else{
      this.setState({
        visible: false,
        resetPassword: true,
      });
    }
  };

  onCheckboxChange = (e) =>{
    this.setState({
      disabled: !e.target.checked,
    })
  };

  clickProtocol = (e, text) => {
    if(text === 'user'){
      this.setState({clickUserProtocol: true})
    }else{
      this.setState({clickUserProtocol: false})
    }
    this.setState({userProtocolVisible: true})
  };

  render() {
    const {disabled, visible, userProtocol, userProtocolVisible, resetPassword, clickUserProtocol, loading} = this.state;
    const footer = (
      <div>
        <div>
          <Button type={'primary'} disabled={disabled} onClick={this.handleOK}>{messages('components.key455')/*确认*/}</Button>
        </div>
      </div>
    );
    const userFooter = (
      <div>
        <div>
          <Button type={'primary'} onClick={() => {this.setState({userProtocolVisible: false})}}>{messages('components.key455')/*确认*/}</Button>
        </div>
      </div>
    );
    const href = (
      this.props.language.code === 'en' ? 'https://console.huilianyi.com/register/pages/privacy_statement_en.html'
        : (this.props.language.code === 'ja' ? 'https://console.huilianyi.com/register/pages/privacy_statement_ja.html'
        : 'https://console.huilianyi.com/register/pages/protocol.html')
    );
    return (
      <div>
        <Modal
          width={525}
          zIndex={2000}
          closable={false}
          maskClosable={false}
          keyboard={false}
          title={
            <span><span style={{color: 'yellow'}}>
              <Icon type="exclamation-circle-o" style={{color: '#faad14'}}/>
              &nbsp;&nbsp;</span>{messages('common.info')}
            </span>}/*提示*/
          visible={visible}
          footer={footer}>
          <Spin spinning={loading}>
            <div style={{margin: "15px 10px 25px"}}>
              <Row className='font-title' style={{fontWeight: 500, fontSize: 15}}>
                <Col span={24}>
                  <p style={{textIndent: 30, lineHeight: '25px'}}> {messages('components.key707')/*汇联易重视用户隐私并遵守相关法律法规，请务必认真阅读以下协议。勾选协议，即表示您同意以下协议中的各项条款。*/}
                  </p>
                </Col>
              </Row>
              <Row className='font-title' style={{fontWeight: 500, fontSize: 15}}>
                <Col span={1}><Checkbox onChange={this.onCheckboxChange}/></Col>
                <Col span={23}>{messages('components.key708')/*我已阅读并同意*/}</Col>
              </Row>
              <Row style={{margin: "10px 0"}}>
                <Col span={23} offset={1}>
                  <a onClick={(e) => this.clickProtocol(e, 'helios')}>{messages('components.key709')/*《汇联易用户使用协议》*/}</a>
                </Col>
              </Row>
              {
                userProtocol.title &&
                <Row>
                  <Col span={23} offset={1}><a onClick={(e) => this.clickProtocol(e, 'user')}>《{userProtocol.title}》</a></Col>
                </Row>
              }
            </div>
          </Spin>
        </Modal>
        <Modal
          width={650}
          bodyStyle={{maxHeight: 400, overflow: 'auto'}}
          maskClosable={false}
          keyboard={false}
          zIndex={3000}
          title={clickUserProtocol ? userProtocol.title : messages('components.key709')/*《汇联易用户使用协议》*/}
          visible={userProtocolVisible}
          footer={userFooter}
          onCancel={() => {this.setState({userProtocolVisible: false})}}>
          {clickUserProtocol ?
            <div style={{marginRight: 10}}>
              <div dangerouslySetInnerHTML={{__html: userProtocol.content}}></div>
            </div>
            : <iframe src={href} width={600} height={400} style={{border: 'none'}}/>
          }
        </Modal>
        {
          resetPassword && <ResetPassword/>
        }
      </div>
    );
  }
}

NewProtocolModal.propTypes = {
  onConfirm: React.PropTypes.func,// 点击确认之后的回调：返回结果
  onCancel: React.PropTypes.func,//点击取消的时候
};

NewProtocolModal.contextTypes = {
  router: React.PropTypes.object
};
NewProtocolModal.defaultProps = {};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    language: state.main.language,
    user: state.login.user,
    tenantMode: state.main.tenantMode,
    company: state.login.company,
  }
}

export default connect(mapStateToProps)(NewProtocolModal);



